<template>
    <div class="address-list">
        <div class="list-box">
            <div class="list-content" v-for="(item,index) in addressData" :key="index">
                <div class="delete-btn" @click="deleteAddress(item.id)">
                    <img src="~assets/icons/delete_red.png" alt="">
                    <span>删除</span>
                </div>
                <div class="edit-address" @click="toEditAddress(item)">
                    <span>编辑</span>
                </div>
                <div class="list-msg">
                    <span class="msg-name">
                        {{item.name}}
                    </span>
                    <div class="default-btn">
                        <div class="btn-detail" v-if="item.default">
                            <span>默认</span>
                        </div>
                    </div>
                </div>
                <div class="list-detail" @click="chooseAddress(item)">
                    <span>{{item.tel}}</span>
                    <span>{{item.address}}</span>
                </div>
            </div>
        </div>
        <div class="add-address" @click="toAddAddress">
            <div class="add-icon">
                <span>+</span>
            </div>
            <span>手动添加</span>
        </div>
    </div>
</template>

<script>
import { MessageBox, Indicator, Toast } from 'mint-ui';

export default {
    name:'addressList',
    data(){
        return {
            addressData:[]
        }
    },
    methods:{
        deleteAddress(id){
            let that = this;
            let token = localStorage.getItem('token');
            MessageBox.confirm('确定删除地址?').then(action => {
                if(action == 'confirm'){
                    console.log(id);
                    Indicator.open({
                        text: '删除中...',
                        spinnerType: 'fading-circle'
                    })
                    that.$ajax(that, 'get', that.$api.addressDelete+id, null, token, function(res){
                        if(res.data['error_code'] == 0){
                            that.getAddressList();
                        }else{
                            Toast({
                                message: res.data['msg'],
                                position: 'bottom',
                                duration: 3000
                            })
                        }
                        Indicator.close();
                    })
                }
            });
        },
        toEditAddress(item){
            this.$router.push({name:'addressEdit', params:{address: item}}); 
        },
        chooseAddress(item){
            console.log(this.$route);
            let route = this.$route.params;
            if(route.from && route.from == 'createOrder'){
                sessionStorage.setItem('address', JSON.stringify(item));
                this.$router.go(-1);
            }
        },
        toAddAddress(){
            this.$router.push('/address/add');
        },
        getAddressList(){
            let that = this;
            let token = localStorage.getItem('token');
            let temAddressArr = [];
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            });
            that.$ajax(that, 'get', that.$api.addressList, null, token, function(res){
                console.log(res);
                if(res.data['error_code'] == 0){
                    let msg = res.data.msg;
                    msg.forEach(item => {
                        let temObj = {};
                        temObj.id = item.id;
                        temObj.name = item.name;
                        temObj.tel = item.phone;
                        if(item.status == 1){
                            temObj.default = true;
                        }else{
                            temObj.default = false;
                        }
                        temObj.address = `${item.province}-${item.city}-${item.area} ${item.address}`;
                        temAddressArr.push(temObj);
                    })
                    that.addressData = temAddressArr
                }
                Indicator.close();
            })
        }
    },
    mounted(){
        this.$store.state.tab = '地址管理';
        this.getAddressList();
    },
    activated(){
        this.$store.state.tab = '地址管理';
        this.getAddressList();
    },
    components:{
        MessageBox,
        Indicator,
        Toast
    }
}
</script>

<style lang='less'>
@rem:100rem;

.address-list{
    width: 100%;
    padding-top: 10/@rem;
    .list-box{
        margin-bottom: 110/@rem;
    }
    .list-content{
        width: 100%;
        height: 170/@rem;
        box-sizing: border-box;
        padding: 0 20/@rem;
        display: flex;
        align-items: center;
        background: #ffffff;
        margin-top: 10/@rem;
        position: relative;
        .delete-btn{
            position: absolute;
            right: 20/@rem;
            top: 20/@rem;
            display: flex;
            align-items: center;
            img{
                height: 40/@rem;
                width: 40/@rem;
            }
            span{
                font-size: 24/@rem;
                color: #f9296e;
                margin-left: 12/@rem;
            }
        }
        .edit-address{
            height: 60/@rem;
            width: 100/@rem;
            position: absolute;
            right: 20/@rem;
            bottom: 20/@rem;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            span{
                color: #6699ff;
            }
        }
        .list-msg{
            width: 144/@rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .msg-name{
                margin-top: 40/@rem;
            }
            .default-btn{
                width: 100/@rem;
                height: 34/@rem;
                .btn-detail{
                    width: 100%;
                    height: 100%;
                    line-height: 34/@rem;
                    border: 1px solid #6699ff;
                    border-radius: 6/@rem;
                    margin-top: 20/@rem;
                    span{
                        font-size: 20/@rem;
                        color: #6699ff;
                    }
                }
            }
        }
        .list-detail{
            width: 474/@rem;
            height: 100%;
            margin-left: 10/@rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            span{
                text-align: start;
            }
            span:nth-of-type(1){
                margin-top: 36/@rem;
            }
            span:nth-of-type(2){
                margin-top: 6/@rem;
            }
        }
    }
    .add-address{
        width: 670/@rem;
        height: 80/@rem;
        background-color: #6699ff;
        border-radius: 8/@rem;
        position: fixed;
        bottom: 0/@rem;
        left: 40/@rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        .add-icon{
            width: 30/@rem;
            height: 30/@rem;
            background: #ffffff;
            border-radius: 50%;
            color: #6699ff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20/@rem;
            span{
                font-size: 30/@rem;
                line-height: 30/@rem;
            }
        }
    }
    .add-address:active{
        background: #5189fb;
    }
}
</style>
